<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="894px"
      :title="voidType == 1 ? '作废' : '作废详情'"
      wrapClassName="user-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-form-model ref="form" :model="form">
          <a-form-model-item
            label="作废原因"
            prop="reason"
            :rules="[{ required: true, message: '请填写作废原因' }]"
          >
            <a-input
              v-model="form.reason"
              placeholder="请填写作废原因"
              type="textarea"
              :disabled="voidType == 2"
              :maxLength="200"
            />
          </a-form-model-item>
          <a-form-model-item
            label="处置措施："
            prop="desc"
            :rules="[{ required: true, message: '请填写处理措施' }]"
          >
            <a-input
              type="textarea"
              placeholder="请填写处理措施"
              v-model="form.desc"
              :disabled="voidType == 2"
              :maxLength="200"
            />
          </a-form-model-item>
          <a-form-model-item label="上传附件" class="choose-deal-file">
            <input
              @change="fileChange"
              type="file"
              ref="upload"
              id="upload"
              style="display: none"
            />
            <!-- 作废 -->
            <div v-if="voidType == 1">
              <a-button type="primary" @click="fileUpload">点击上传</a-button>
              <div class="file-name-type" v-if="fileList.length > 0">
                <div
                  v-for="(item, index) in fileList"
                  :key="index"
                  @click="viewFile(item)"
                >
                  <div
                    class="file-list"
                    @mouseover="mouseOver(item, index)"
                    @mouseleave="mouseLeave(item, index)"
                  >
                    <div class="file-name">
                      <a-icon :type="item.iconType" style="margin-right: 5px" />
                      <div class="file-name-text">
                        {{ item.name }}
                      </div>
                    </div>
                    <div style="margin-left: 8px">
                      <span class="size-color">{{ sizeTostr(item.size) }}</span>
                      <a-icon
                        v-show="!item.checkd"
                        type="check"
                        class="check-icon"
                      />
                      <a-icon
                        v-show="item.checkd"
                        type="close-circle"
                        class="close-icon"
                        @click.stop="fileDelete(index, item)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 详情 -->
            <div v-if="voidType == 2">
              <a-input
                v-if="fileList.length == 0"
                disabled
                value="暂无附件"
              ></a-input>
              <div v-else class="file-name-type">
                <div
                  v-for="(item, index) in fileList"
                  :key="index"
                  @click="viewFile(item)"
                >
                  <div class="file-download-list">
                    <div class="file-name">
                      <a-icon type="paper-clip" style="margin-right: 5px" />
                      <div class="file-name-text">{{ item.name }}</div>
                    </div>
                    <div style="margin-left: 8px">
                      <span class="size-color">{{ sizeTostr(item.size) }}</span
                      ><a-icon
                        type="download"
                        class="download-icon"
                        @click.stop="downLoadFile(item)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="modal-footer" v-if="voidType == 1">
        <a-button type="primary" class="back-button" @click="closeModal()"
          >取消</a-button
        >
        <a-button type="primary" @click="submit()">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { invalidData } from "@/api/wisdom-beam/trial-app";
import { getDisposalDetail } from "@/api/wisdom-beam/trial-app";
import { kkFileView } from "@/utils";
export default {
  props: ["visible", "id", "voidType"],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          if (this.voidType == 2) {
            this.getDisposalDetail();
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        reason: "",
        desc: "",
      },
      fileList: [],
    };
  },
  methods: {
    // 查看预警处理记录
    getDisposalDetail() {
      getDisposalDetail({
        warnRecordId: this.id,
        type: 2,
      })
        .then((res) => {
          let disposalList = res.data.result || [];
          this.form = {
            reason: disposalList[0].reason,
            desc: disposalList[0].disposalOpinion,
          };

          //附件
          let fileArr = disposalList[0].fileList || [];
          this.fileList = [];
          fileArr.forEach((item) => {
            this.fileList.push({
              uid: item.id,
              name: item.realFileName,
              checkd: false,
              iconType: "paper-clip",
              size: item.fileSize,
              file: "",
              id: item.id,
              fileUrl: item.fileUrl,
              name: item.realFileName,
            });
          });
        })
        .catch((_) => {});
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let formdata = new FormData();
          if (this.fileList.length > 0) {
            formdata.append("file", this.fileList[0].file);
          } else {
            formdata.append("file", "");
          }
          formdata.append("warningRecordId", this.id);
          formdata.append("disposalOpinion", this.form.desc);
          formdata.append("reason", this.form.reason);
          formdata.append("status", 0);
          invalidData(formdata)
            .then((res) => {
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((err) => {});
        }
      });
    },
    closeModal() {
      this.fileList = [];
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },

    //附件预览
    viewFile(file) {
      let { fileUrl } = file;
      window.open(kkFileView(fileUrl));
    },
    //附件下载
    downLoadFile(file) {
      let { fileUrl, name } = file;
      window.open(fileUrl + "&filename=" + name, "_blank");
    },
    //文件上传
    fileUpload() {
      this.$refs.upload.click();
    },
    fileChange(event) {
      this.fileList = [];
      this.fileList.unshift({
        file: event.target.files[0],
        name: event.target.files[0].name,
        size: event.target.files[0].size,
        checkd: false,
        iconType: "loading",
      });
      setTimeout(() => {
        this.fileList[0].iconType = "paper-clip";
        event.target.value = "";
      }, 500);
    },

    //文件删除
    fileDelete(i, item) {
      this.fileList.splice(i, 1);
      if (item.id) {
        this.fileIds.push(item.id);
      }
    },

    // 移入
    mouseOver(item, index) {
      item.checkd = true;
    },
    // 移出
    mouseLeave(item, index) {
      item.checkd = false;
    },
    //文件大小转换
    sizeTostr(size) {
      var data = "";
      data = (size / 1024).toFixed(2) + "kb";
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.user-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .ant-modal-header {
    border-top: 5px solid var(--primary-color) !important;
  }
  .curve-modal-body {
    padding: 20px 50px;
    max-height: 600px;
    .custom-scrollbar();
  }
  .modal-footer {
    padding: 18px 0;
    text-align: center;
    border-top: 2px solid #f3f4f6;
    .back-button {
      background: #f1f2f7;
      color: var(--primary-color);
      border: 0;
    }
  }
}
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 100px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
